<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.acode"
        placeholder="A股代码"
        style="width: 200px"
        class="filter-item"
      />

      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >
        Search
      </el-button>
      <!--<el-button
        class="filter-item"
        style="margin-left: 10px"
        type="primary"
        icon="el-icon-edit"
        @click="handleCreate"
      >
        Add
      </el-button> -->
      <el-button
        :loading="downloadLoading"
        class="filter-item"
        type="primary"
        icon="el-icon-download"
        @click="handleDownload"
      >
        Export
      </el-button>
    </div>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column label="Id">
        <template #default="scope">
          <span>{{ scope.row.Id }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="板块" label="板块"> </el-table-column>
      <el-table-column prop="公司名称" label="公司名称"> </el-table-column>
      <el-table-column prop="英文名称" label="英文名称"> </el-table-column>
      <el-table-column prop="注册地" label="注册地"> </el-table-column>
      <el-table-column prop="A股代码" label="A股代码"> </el-table-column>
      <el-table-column prop="A股简称" label="A股简称"> </el-table-column>
      <el-table-column prop="A股上市时间" label="A股上市时间">
      </el-table-column>
      <el-table-column prop="A股总股本" label="A股总股本"> </el-table-column>
      <el-table-column prop="A股流通股本" label="A股流通股本">
      </el-table-column>

      <!-- <el-table-column prop="B股代码" label="B股代码"> </el-table-column>
      <el-table-column prop="B股简称" label="B股简称"> </el-table-column>
      <el-table-column prop="B股上市时间" label="B股上市时间">
      </el-table-column>
      <el-table-column prop="B股总股本" label="B股总股本"> </el-table-column>
      <el-table-column prop="B股流通股本" label="B股流通股本">
      </el-table-column> -->

      <el-table-column prop="地区" label="地区"> </el-table-column>
      <el-table-column prop="省份" label="省份"> </el-table-column>
      <el-table-column prop="城市" label="城市"> </el-table-column>
      <el-table-column prop="所属行业" label="所属行业"> </el-table-column>
      <el-table-column label="公司网址">
        <template #default="scope">
          <a
            :href="'http://' + scope.row.公司网址"
            target="_blank"
            style="text-decoration: none"
            >{{ scope.row.公司网址 }} <svg-icon style="margin-left:5px" icon-class="link" /></a
          >
        </template>
      </el-table-column>
      <el-table-column label="行情" class-name="status-col" width="100">
        <template #default="scope">
          <el-button
            type="primary"
            size="mini"
            @click="handleUpdate(scope.row)"
          >
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="block pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        v-model:currentPage="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="10"
        layout="total,sizes, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>

    <!-- <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="left"
        label-width="70px"
        style="width: 400px; margin-left: 50px"
      >
        <el-form-item label="Type" prop="type">
          <el-select
            v-model="temp.type"
            class="filter-item"
            placeholder="Please select"
          >
            <el-option
              v-for="item in calendarTypeOptions"
              :key="item.key"
              :label="item.display_name"
              :value="item.key"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="Date" prop="timestamp">
          <el-date-picker
            v-model="temp.timestamp"
            type="datetime"
            placeholder="Please pick a date"
          />
        </el-form-item>
        <el-form-item label="Title" prop="title">
          <el-input v-model="temp.title" />
        </el-form-item>
        <el-form-item label="Status">
          <el-select
            v-model="temp.status"
            class="filter-item"
            placeholder="Please select"
          >
            <el-option
              v-for="item in statusOptions"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="Imp">
          <el-rate
            v-model="temp.importance"
            :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
            :max="3"
            style="margin-top: 8px"
          />
        </el-form-item>
        <el-form-item label="Remark">
          <el-input
            v-model="temp.remark"
            :autosize="{ minRows: 2, maxRows: 4 }"
            type="textarea"
            placeholder="Please input"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false"> Cancel </el-button>
        <el-button
          type="primary"
          @click="dialogStatus === 'create' ? createData() : updateData()"
        >
          Confirm
        </el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="dialogPvVisible" title="Reading statistics">
      <el-table
        :data="pvData"
        border
        fit
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column prop="key" label="Channel" />
        <el-table-column prop="pv" label="Pv" />
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogPvVisible = false"
          >Confirm</el-button
        >
      </span>
    </el-dialog> -->
  </div>
</template>

<script>
import { ref, reactive, toRefs, onMounted } from "vue";
import { getsza, getszatotal } from "../../api/stock";
import { useRouter, useRoute } from "vue-router";
import { parseTime } from "../../utils";
export default {
  setup() {
    const router = useRouter();
    const route = useRoute();
    const state = reactive({
      downloadLoading: false,
      list: null,
      currentPage: 1,
      pageNum: 1,
      pageSize: 10,
      total: 0,
      listQuery: { acode: "" },
      tableData: [
        {
          // Id: 2,
          // 板块: "主板",
          // 公司名称: "平安银行股份有限公司",
          // 英文名称: "Ping An Bank Co., Ltd.",
          // 注册地: "广东省深圳市罗湖区深南东路5047号",
          // A股代码: "000001",
          // A股简称: "平安银行",
          // A股上市时间: "1991-04-03",
          // A股总股本: "19,405,918,198",
          // A股流通股本: "19,405,754,475",
          // B股代码: "",
          // B股简称: "",
          // B股上市时间: "",
          // B股总股本: "0",
          // B股流通股本: "0",
          // 地区: "华南",
          // 省份: "广东",
          // 城市: "深圳市",
          // 所属行业: "J 金融业",
          // 公司网址: "bank.pingan.com",
        },
      ],
    });
    onMounted(() => {
      let params = {
        pageNum: state.pageNum,
        pageSize: state.pageSize,
        aCode: state.listQuery.acode,
      };
      gettotal(params);
      getdata(params);
    });
    const handleUpdate = (row) => {
  
      router.push({ path: "/stockindex" });
    };
    const gettotal = async (params) => {
      let total = await getszatotal(params);
      state.total = total.data[0].c;
      // state.total = 2449;

      // state.total = total.data[0].count(Id);
    };
    const handleFilter = () => {
      let params = {
        pageNum: state.pageNum,
        pageSize: state.pageSize,
        aCode: state.listQuery.acode,
      };
      gettotal(params);
      getdata(params);
    };
    const getdata = async (params) => {
      let value = await getsza(params);
      state.tableData = value.data;
    };

    const handleSizeChange = (val) => {
      state.pageSize = val;
      let params = {
        pageNum: state.pageNum,
        pageSize: state.pageSize,
        aCode: state.listQuery.acode,
      };
      gettotal(params);
      getdata(params);
    };
    const handleDownload = () => {
      state.downloadLoading = true;
      import("@/vendor/Export2Excel").then((excel) => {
        const tHeader = ["timestamp", "title", "type", "importance", "status"];
        const filterVal = [
          "timestamp",
          "title",
          "type",
          "importance",
          "status",
        ];
        const data = formatJson(filterVal);
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: "table-list",
        });
        state.downloadLoading = false;
      });
    };

    const formatJson = (filterVal) => {
      return state.tableData.map((v) =>
        filterVal.map((j) => {
          if (j === "timestamp") {
            return parseTime(v[j]);
          } else {
            return v[j];
          }
        })
      );
    };
    const handleCurrentChange = (val) => {
      state.pageNum = val;
      let params = {
        pageNum: state.pageNum,
        pageSize: state.pageSize,
        aCode: state.listQuery.acode,
      };
      getdata(params);
    };
    return {
      ...toRefs(state),
      handleSizeChange,
      handleCurrentChange,
      handleFilter,
      handleDownload,
      handleUpdate,
    };
  },
};
</script>

<style>
.pagination {
  margin: 40px;
  padding-bottom: 40px;
}
</style>